<script setup lang="ts">
	import { ref, inject, computed } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import {
		advancePayment,
		cancelSignUp, isPlayProducts,
		personOrderShow,
		playCheck
	} from '@/api/training'
	import { changeSignUp, getOrderDetials } from '@/api/match'
	import { REFUNDS_ENUM, SIGN_ENUM, SIGN_ENUM_TEXT, SIGN_ENUM_MATCH } from '@/utils/basicData'
	import uploadImage from '@/components/uploadImage/index.vue'
	import { formValidate, msg, phoneCode, showModal, wechatPayment } from '@/utils/tools'
	import { orderInfoType } from '@/utils/types'
	import { clothesSize } from "@/utils/basicData";
	import inputNumber from '@/components/inputNumber/inputNumber.vue' 
	const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
	let orderId = 0
	const totalPrice = ref(0)
	const productShow = ref(false)
	const orderInfo = ref({})
	const $Prefix = inject('$Prefix')
	const markersAddress = ref<any[]>([])
	const insuranceFile = ref([])
	const insurancePayEnum = ref(true)
	const indisabledEnum = ref(true)
	const infoShow = ref(false)
	const editing = ref(false)
	onLoad((options : any) => {
		orderId = options.id
	})
	onShow(() => {
		getOrderInfo()
	})
	const getOrderInfo = () => {
		getOrderDetials(orderId).then(res => {
			if (res.code == 200) {
				console.log(res);
				orderInfo.value = res.data
			}
		})
	}
	const serviceClick = () => {
		if (!indisabledEnum.value) {
			return false
		}
		insurancePayEnum.value = !insurancePayEnum.value
		insuranceFile.value = []
		if (!insurancePayEnum.value) {
			uni.showModal({
				title: '温馨提示',
				content: '参加训练营需要保险,若不再本平台购买保险,请上传其他保险证明才可缴费',
				confirmText: "我已知晓",
				showCancel: false,
				confirmColor: '#92C75B'
			})
		}
		calculateAmount()
	}
	const calculateAmount = () => {
		totalPrice.value = 0
		if (insurancePayEnum.value && orderInfo.value.registrationOrderStatusEnum == 3) {
			totalPrice.value += +orderInfo.value.insuranceAmount
		}

		orderInfo.value.products.map((item : any) => {
			totalPrice.value += +item.registrationAmount
		})
		if (orderInfo.value.buyAdditionalProducts.length > 0) {
			orderInfo.value.buyAdditionalProducts.map((item : any) => {
				totalPrice.value += +item.registrationAmount
			})
		}
	}
	// 取消报名筛选
	const cancelEnum = (data : number) => {
		return [0, 2, 3, 8].indexOf(data) > -1
	}
	// 支付按钮筛选
	const playEnum = (data : number) => {
		return [3, 8].indexOf(data) > -1
	}

	// 微信导航
	const navigationClick = (data : any) => {
		uni.openLocation({
			latitude: parseFloat(data.latitude),
			longitude: parseFloat(data.longitude),
			name: data.address,
			address: data.activityAddress
		});
	}

	// 支付生成预订单
	const preOrder = () => {
		if (orderInfo.value.registrationOrderStatusEnum == 3 && !insurancePayEnum.value && insuranceFile.value.length == 0) {
			msg('请上传保险附件证明材料', false)
			return false
		}
		const insuranceFileString = insuranceFile.value.map(item => {
			return {
				fullUrl: item.fullUrl,
				id: item.id,
				name: item.name,
				thumb_url: item.thumb_url,
				url: item.originalUrl
			}
		})
		const params = {
			id: orderInfo.value.id,
			insurancePayEnum: insurancePayEnum.value ? 1 : 0,
			insuranceFile: JSON.stringify(insuranceFileString)
		}
		advancePayment(params).then(res => {
			if (!res.data.payInfo) {
				// productShow.value = true
				productShow.value = false
				getOrderInfo()
			} else {
				// 起调支付
				wechatPayment(res.data.payInfo).then((_res : any) => {
					// 支付后检查是否支付
					playCheck({ orderId: res.data.orderId }).then(resData => {
						msg('支付成功', false)
						getOrderInfo()
						// productShow.value = true
						productShow.value = false
					}).catch((err : any) => {
						msg('检查失败，请从新进行页面', false)
					})
				}).catch((err : any) => {
					getOrderInfo()
					msg('支付失败，请重试', false)
				})
			}
		})
	}
	const cancelRegistration = (data : any) => {
		showModal({
			content: '您确定要取消报名吗？',
			confirmText: '确定',
			success: (res) => {
				if (res.confirm) {
					cancelSignUp({ id: orderInfo.value.id }).then(res => {
						msg('取消成功')
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2];
						uni.navigateBack({
							delta: 1,
							success: () => {
								// #ifndef H5
								prevPage?.$vm?.reload()
								// #endif
								// #ifdef H5
								prevPage.$.setupState.reload()
								// #endif
							}
						})
					})
				}
			}
		})
	}
	const previewImage = (url : string) => {
		uni.previewImage({
			current: url,
			urls: [url]
		})
	}
	const addProducts = () => {
		isPlayProducts({ registrationId: orderInfo.value.id }).then(res => {
			if (res.data) {
				uni.navigateTo({ url: `/pageSignUp/productsOrder/productsOrder?id=${orderInfo.value.id}` })
			} else {
				uni.navigateTo({ url: `/pageSignUp/additionalProducts/additionalProducts?id=${orderInfo.value.id}` })
			}
		})
	}

	const skipInsurance = () => {
		const url = 'https://dwx-sit.cpic.com.cn/cxNew/dwx/mobilemsbv2/?channelCode=14&hdlrCode=999&sourceType=A2&plcPlanCode=PDL20240524A00008469&version=V001&branchCode=6010100#/'
		uni.navigateTo({ url: `/pages/webView/webView?url=${encodeURIComponent(url)}` })
	}

	const insuranceEdit = () => {
		uni.navigateTo({ url: `/pageSignUp/insuranceEdit/insuranceEdit?id=${orderInfo.value.id}` })
	}

	const refundClick = (type : any, data : any) => {
		const params = {
			id: 0,
			name: orderInfo.value.products[0].name,
			regId: orderInfo.value.id,
			sourceId: 0,
			orderTypeEnum: type,
			payTime: orderInfo.value.products[0].payTime,
			createdTime: orderInfo.value.products[0].createdTime
		}
		if (type == 0) { // 项目
			params.sourceId = orderInfo.value.id
		} else if (type == 1) { // 附加产品
			params.name = data.name
			params.sourceId = data.id
			params.payTime = data.payTime
			params.createdTime = data.createdTime
		}
		uni.navigateTo({ url: `/pageSignUp/refundsForm/refundsForm?params=${JSON.stringify(params)}` })
	}

	const reload = () => {
		getOrderInfo()
	}

	const refundInfo = (data : any, type : number) => {
		const params = {
			id: 0,
			name: orderInfo.value.products[0].name,
			regId: orderInfo.value.id,
			sourceId: 0,
			orderTypeEnum: type,
			payTime: orderInfo.value.products[0].payTime,
			createdTime: orderInfo.value.products[0].createdTime
		}
		if (type == 0) { // 项目
			params.sourceId = orderInfo.value.id
		} else if (type == 1) { // 附加产品
			params.name = data.name
			params.sourceId = data.id
			params.payTime = data.payTime
			params.createdTime = data.createdTime
		}

		uni.navigateTo({ url: `/pageSignUp/refundList/refundList?id=${orderInfo.value.id}&param=${JSON.stringify(params)}&type=${type}` })

	}

	const mobileClick = (tel : string) => {
		uni.makePhoneCall({
			phoneNumber: tel
		})
	}

	defineExpose({ reload })

	const show = computed(() => {
		return orderInfo.value.regType != "LEAD" && orderInfo.value.regType != "COACHS";
	})
	const translateStatus = (status) => {
		switch (status) {
			case "REMOVED":
				return "已移除";
			case "UNDER_REVIEW":
				return "审核中";
			case "APPROVED_BY_REVIEW":
				return "审核通过";
			case "REVIEW_FAILED":
				return "审核未通过";
			default:
				return "未知类型";
		}
	}
	// 查看报名须知
	const registrationNotice = () => {
		uni.downloadFile({
			url: "https://pro.star.ihehang.com/mini/static/icons/bmtz.pdf",
			success: res => {
				uni.openDocument({
					filePath: res.tempFilePath
				})
			}
		})

	}
	// 查看保险理赔
	const registrationInsure = () => {
		uni.downloadFile({
			url: "https://pro.star.ihehang.com/mini/static/icons/lp.pdf",
			success: res => {
				uni.openDocument({
					filePath: res.tempFilePath
				})
			}
		})

	}
	const imgShow = ref(false);
	// 打开尺码表弹窗
	const openSize = () => {
		imgShow.value = true
	}

	const handleEdit = () => {
		orderInfo.value.newPhoto = [];
		editing.value = true;
	}
	const signFromRule = {
		height: { message: '请输入身高' },
		weight: { message: '请输入体重' },
		age: { message: '请输入年龄' },
		clothingSize: { message: '请选择衣服尺码' },
		uniformNumber: { message: '请输入球衣号码' },
		photo: { message: '请输入上传蓝底证件照' },
		phone: { message: '请输入联系方式', patternType: 'phone' },
		emContact: { message: '请输入紧急人' },
		emPhone: { message: '请输入紧急联系方式', patternType: 'phone' },
	}
	const signFromRule1 = {
		photo: { message: '请输入上传蓝底证件照' },
		phone: { message: '请输入联系方式', patternType: 'phone' },
		emContact: { message: '请输入紧急人' },
		emPhone: { message: '请输入紧急联系方式', patternType: 'phone' },
	}
	const handleOK = async () => {
		const formDataInfo = JSON.parse(JSON.stringify(orderInfo.value))
		formDataInfo.age = Number(orderInfo.value.age)
		formDataInfo.uniformNumber = Number(orderInfo.value.uniformNumber)
		formDataInfo.photo = orderInfo.value.newPhoto.length == 0 ? orderInfo.value.photo : orderInfo.value.newPhoto[0]?.fullUrl
		let rules : any = signFromRule;

		if (orderInfo.value.regType != "SPORTS_MAN") {
			rules = signFromRule1;
		}
		await formValidate(orderInfo.value, rules)

		if (formDataInfo.phone && !phoneCode(formDataInfo.phone)) {
			msg('请输入正确的联系电话', false)
			return false
		}
		if (formDataInfo.emPhone && !phoneCode(formDataInfo.emPhone)) {
			msg('请输入正确的紧急联系方式', false)
			return false
		}

		changeSignUp(formDataInfo).then(res => {
			if (res.code == 200) {
				msg("修改成功");
				editing.value = false;
			}
		})
	}
</script>

<template>
	<view class="order-body">
		<xx-title title="订单详情" />
		<view class="order-item">
			<view class="order-title">订单状态</view>
			<view class="order-status">{{SIGN_ENUM_MATCH[orderInfo?.order?.orderStatus]}}</view>
		</view>

		<view class="order-item">
			<view class="order-header">
				<view class="order-name">订单详情</view>
				<view class="order-name"></view>
			</view>
			<view class='order-product'>
				<view class='order-product-left'>
					<view class="order-body-item">
						<view class="body-list-name">{{ orderInfo.eventName }}</view>
						<view class="body-item-bottom">
							<view class="body-item-left">
								<view class="left-num"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderInfo?.regType =='SPORTS_MAN'" class="order-body-btn">
				<text>报名费：</text>
				<view class="money">￥{{orderInfo?.order?.orderAmount}}</view>
			</view>
			<view v-if="orderInfo?.regType =='SPORTS_MAN'" class="order-body-btn">
				<text>保险费：（保险费不可退）</text>
				<view class="money">￥{{orderInfo?.order?.insuranceAmount}}</view>
			</view>
			<view v-if="orderInfo?.regType =='SPORTS_MAN'" class="order-body-btn">
				<text>合计：</text>
				<view class="money">￥{{orderInfo?.order?.orderRealAmount}}</view>
			</view>
		</view>


		<view class="order-item">
			<view class="order-header">
				<view class="order-name">报名信息</view>
			</view>
			<view class="order-info">
				<view class="order-info-item">
					<view class="label">赛事级别</view>
					<view class="value">{{orderInfo.gameLevel==1?"市（州）":"县（市区）"}}</view>
				</view>
				<view class="order-info-item">
					<view class="label">报名组别</view>
					<view class="value">{{orderInfo.groupName}}</view>
				</view>
				<view class="order-info-item">
					<view class="label">球队名称</view>
					<view class="value">{{orderInfo.gameTeamName}}</view>
				</view>

				<view class="order-info-item">
					<view class="label">参赛人姓名</view>
					<view class="value">{{orderInfo.competeName}}</view>
				</view>
				<view class="order-info-item">
					<view class="label">性别</view>
					<view class="value">{{orderInfo.sex == "WOMAN" ? '女' : '男' }}</view>
				</view>
				<view class="order-info-item">
					<view class="label">年龄</view>
					<view class="value">{{orderInfo.age}}</view>
				</view>
				<view class="order-info-item">
					<view class="label">身份证</view>
					<view class="value">{{orderInfo.idCard}}</view>
				</view>
				<view v-if="!editing" class="">
					<view v-if="show" class="order-info-item">
						<view class="label">身高</view>
						<view class="value">{{orderInfo.height}}cm</view>
					</view>
					<view v-if="show" class="order-info-item">
						<view class="label">体重</view>
						<view class="value">{{orderInfo.weight}}kg</view>
					</view>
					<view v-if="show" class="order-info-item">
						<view class="label">衣服尺码</view>
						<view class="value">{{orderInfo.clothingSize}}</view>
					</view>
					<view v-if="show" class="order-info-item">
						<view class="label">球员号码</view>
						<view class="value">{{orderInfo.uniformNumber}}</view>
					</view>
					<view class="order-info-item flex-start">
						<view class="label">个人照片</view>
						<view class="value">
							<image @click="previewImage(orderInfo?.photo)" style="width: 150rpx;height: 150rpx"
								:src="orderInfo?.photo" />
						</view>
					</view>
					<view class="order-info-item">
						<view class="label">联系电话</view>
						<view class="value">{{orderInfo.phone}}</view>
					</view>
					<view class="order-info-item">
						<view class="label">紧急联系人</view>
						<view class="value">{{ orderInfo.emContact }}</view>
					</view>
					<view class="order-info-item">
						<view class="label">紧急联系人电话</view>
						<view class="value">{{ orderInfo.emPhone }}</view>
					</view>
				</view>
				<view v-else class="">
					<view v-if="show" class="sign-item">
						<view class="sign-label required">球员号码</view>
						<view class="sign-value">
							<input type="text" v-model="orderInfo.uniformNumber" placeholder="请输入球员号码" />
						</view>
					</view>
					<view v-if="show" class="sign-item center">
						<view class="sign-label required">身高(cm)</view>
						<view class="sign-value">
							<input-number v-model="orderInfo.height" unit="cm" :negative="true" />
						</view>
					</view>

					<view v-if="show" class="sign-item center">
						<view class="sign-label required">体重(kg)</view>
						<view class="sign-value">
							<input-number v-model="orderInfo.weight" unit="kg" :negative="true" />
						</view>
					</view>

					<view v-if="show" class="sign-item">
						<view class="sign-label required">衣服尺码</view>
						<view class="sign-value">
							<uni-data-select v-model="orderInfo.clothingSize" :localdata="clothesSize"
								placeholder="请选择衣服尺码"></uni-data-select>
						</view>

					</view>
					<view v-if="show" class="check-btn" @click="openSize">查看尺码表</view>
					<view class="sign-item">
						<view class="sign-label required">联系电话</view>
						<view class="sign-value">
							<input type="number" v-model="orderInfo.phone" placeholder="请输入联系电话" />
						</view>
					</view>
					<view class="sign-item">
						<view class="sign-label required">紧急联系人</view>
						<view class="sign-value">
							<input type="text" v-model="orderInfo.emContact" placeholder="请输入紧急联系人" />
						</view>
					</view>

					<view class="sign-item">
						<view class="sign-label required">紧急电话</view>
						<view class="sign-value">
							<input type="number" v-model="orderInfo.emPhone" placeholder="请输入紧急联系电话" />
						</view>
					</view>
					<view class="sign-item">
						<view class="sign-label required">个人照片</view>
						<view class="sign-value">
							<upload-image :max-count="1" v-model="orderInfo.newPhoto" />
						</view>
					</view>
				</view>
				<view class="order-info-item">
					<view class="label">审核状态</view>
					<view class="value">{{ translateStatus(orderInfo.examineState) }}</view>
				</view>
				<view class="order-info-item">
					<view class="label">审核信息</view>
					<view class="value">{{ orderInfo.examineRemark }}</view>
				</view>
				<view class="order-info-item">
					<view class="label">报名须知</view>
					<view class="value check" @click="registrationNotice">查看</view>
				</view>
				<view class="order-info-item">
					<view class="label">理赔流程</view>
					<view class="value check" @click="registrationInsure">查看</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="orderInfo.examineStatus!=='APPROVED_BY_REVIEW'" class="bottom-btn"
		:style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
		<view v-if="editing" class="btn">
			<view class="personal-registration" @click="handleOK()">提交</view>
		</view>
		<view v-else class="btn">
			<view class="personal-registration" @click="handleEdit()">修改报名信息</view>
		</view>
	</view>
	<up-overlay :show="imgShow" @click="imgShow = false">
		<view class="wrap">
			<view class="rect" @tap.stop>
				<image class="size-img" :src="`${$Prefix}/mini/static/icons/chima.png`" mode="widthFix" />
			</view>
		</view>
	</up-overlay>
</template>

<style scoped lang="scss">
	.order-body {
		width: 100%;
		box-sizing: border-box;
		padding: 1rpx;
		background-color: #F5F5F5;
		min-height: 100vh;

		.order-item {
			margin: 28rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;

			.order-title {
				font-size: 24rpx;
				color: #818496;
			}

			.order-status {
				margin-top: 5rpx;
				font-size: 36rpx;
				font-weight: 500;
			}

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 14rpx;
				border-bottom: 1rpx solid #EBEBEB;

				.order-name {
					font-size: 32rpx;
					color: #21252E;
				}

				.order-num {
					font-size: 24rpx;
					color: #818496;
				}
			}

			.order-product {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				border-bottom: 1rpx solid #F5F5F5;
				position: relative;

				.order-product-left {

					// width: calc(100% - 150rpx);
					.order-body-item {
						position: relative;
						border-bottom: 0;
					}

					.body-item-left {
						width: 100%;
					}
				}

				.order-product-right {
					width: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					padding-bottom: 20rpx;

					.btn {
						font-size: 24rpx;
						padding: 8rpx 24rpx;
						border-radius: 24rpx;
						border: 1rpx solid #ECEEF1;
					}
				}
			}

			.order-body-item {
				padding: 14rpx 0;
				border-bottom: 1rpx solid #F5F5F5;
				position: relative;

				.body-list-name {
					font-size: 28rpx;
					color: #21252E;
					margin-bottom: 4rpx;
				}

				.body-item-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.body-item-left {
						width: calc(100% - 150rpx);

						.left-info {
							font-size: 24rpx;
							color: #505363;
						}

						.left-num {
							margin-top: 5rpx;
							font-size: 24rpx;
							color: #505363;
						}
					}

					.body-item-right {
						width: 150rpx;

						.btn {
							font-size: 24rpx;
							padding: 8rpx 24rpx;
							border-radius: 24rpx;
							border: 1rpx solid #ECEEF1;
						}
					}
				}
			}

			.order-body-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;

				text {
					font-size: 24rpx;
					color: #818496;
				}

				.money {
					color: #F37C2B;
					font-size: 32rpx;
					font-weight: 500;
				}

				.order-total-text {
					display: flex;
					align-items: baseline;
				}

				.order-total-btn {
					font-size: 24rpx;
					padding: 8rpx 24rpx;
					border-radius: 24rpx;
					border: 1rpx solid #ECEEF1;
				}
			}

			.order-info {
				padding: 10rpx 0;

				.order-info-item {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 8rpx 0;
					font-size: 28rpx;

					&.flex-start {
						align-items: flex-start;
					}

					.label {
						color: #27292c;
						width: 170rpx;
					}

					.value {
						width: calc(100% - 170rpx);
						color: #505363;
						text-align: right;

						&.check {
							color: #0066ff;
						}
					}
				}
			}

			.order-info-item-center {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}

		.order-products {
			margin: 0 28rpx;

			image {
				width: 100%;
			}
		}
		
		.sign-item {
			padding: 24rpx 0;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
		
			&.start-item {
				align-items: flex-start;
			}
		
			&:last-child {
				border-bottom: none;
			}
		
			.tips {
				position: absolute;
				right: 0rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: normal;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 0.4);
				line-height: 36rpx;
				text-align: right;
				font-style: normal;
			}
		
			.sign-label {
				color: #505363;
				font-size: 28rpx;
				width: 160rpx;
		
				&.required {
					position: relative;
					padding-left: 20rpx;
		
					&:before {
						content: '*';
						display: block;
						position: absolute;
						color: #ff3c3c;
						top: 0;
						left: 0;
					}
				}
			}
		
			.sign-value {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
				color: #21252E;
				font-weight: 500;
		
				input {
					width: 100%;
					font-weight: 500;
				}
		
				textarea {
					background-color: #F7F7F7;
					border-radius: 12rpx;
					box-sizing: border-box;
					font-weight: 500;
					width: 100%;
					padding: 10rpx;
					height: 150rpx;
				}
			}
		}
	}


	.check-btn {
		color: #1677FE;
		font-size: 28rpx;
		text-align: right;
		padding-top: 10rpx;
	}
	
	.size-img {
		width: 100%;
		top: 500rpx;
		position: absolute;
	}
	.eq-code-title {
		text-align: center;
		margin-bottom: 10rpx;
		color: #505363;
	}

	.eq-code-image {
		width: 500rpx;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.bottom-fixed {
		padding-top: 14px;
		background-color: #F5F5F5;

		.seizeASeat {
			height: 60rpx;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		border-top: 1px solid #F1F2F4;
		padding-top: 14rpx;
		z-index: 10;
		background-color: #FFFFFF;
	
		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	
		.personal-registration {
			background: #FFD200;
			border-radius: 16rpx;
			width: calc(100% - 20rpx);
			border: 1rpx solid #FFD200;
			padding: 16rpx 0;
			letter-spacing: 2rpx;
			font-weight: 500;
			text-align: center;
			font-family: OPPOSans, OPPOSans;
			font-weight: normal;
			font-size: 28rpx;
			color: #333333;
			font-style: normal;
	
			&.disabled {
				background-color: #E5E5E5;
				color: #818496;
				border: 1rpx solid #E5E5E5;
			}
	
			&.hollowedOut {
				border: 1rpx solid #92C75B;
				color: #92C75B;
				background-color: transparent;
			}
		}
	}

	.insurance {
		margin: 28rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;

		.title {
			font-size: 32rpx;
			color: #21252E;
			display: flex;
			align-items: center;
			padding-bottom: 14rpx;
			border-bottom: 1rpx solid #EBEBEB;

			&:before {
				content: '*';
				color: #f34848;
			}
		}

		.insurance-file {
			padding-top: 14rpx;
		}
	}

	.train-address {
		margin: 16rpx 28rpx 18rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;

		.info-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.address-left {
				width: calc(100% - 28rpx);
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.address {
					color: #505363;
					margin-left: 5rpx;
					font-size: 28rpx;
				}
			}
		}

		.map-box {
			width: 100%;
			height: 200rpx;
			background-color: #f5f5f5;
			margin-top: 16rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.map-continer {
				width: 100%;
				height: 100%;
			}
		}
	}

	.service-list {
		margin: 28rpx;

		.service-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: rgba(243, 124, 43, 0.06);
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.service-body {
				width: calc(100% - 100px);

				.service-title {
					font-size: 28rpx;
					color: #505363;
					word-break: break-all;
				}

				.service-content {
					margin-top: 5rpx;
					font-size: 24rpx;
					color: #818496;
				}

				&.special {
					width: 100%;

					.service-href {
						color: #0c82ea;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}

			.service-money {
				width: 80px;
				color: #F36E13;
			}

			.service-btn {
				width: 20px;
				text-align: right;

				.btn {
					width: 20px;
					height: 20px;
					border-radius: 100rpx;
					background-color: #F5F5F5;
					border: 1rpx solid #999999;
					display: flex;
					justify-content: center;
					align-items: center;

					&.check {
						background-color: transparent;
						border: none;
					}
				}

				&.disable .btn {
					border: 1rpx solid #999999;
					background-color: #e6e6e6;
				}
			}
		}
	}

	.product-body {
		width: 100%;
		text-align: center;

		.product-close {
			width: 90%;
			text-align: right;
			margin-bottom: 20rpx;

			::v-deep .u-icon {
				display: inline-block;
			}
		}

		image {
			width: 100%;
			margin: 20rpx 0;
		}

		.product-btn {
			margin: 0 auto;
			padding: 16rpx 32px;
			display: inline-block;
			border-radius: 100rpx;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			font-weight: bold;
			background: linear-gradient(180deg, #92C75B 0%, #5E9426 100%);
			box-shadow: inset 0 4rpx 0 0 rgba(255, 255, 255, 0.5);
		}
	}

	.btn-status {
		position: absolute;
		right: -10rpx;
		top: 10rpx;
		font-size: 12px;
		border-radius: 20rpx 0 0 20rpx;
		color: #FFFFFF;
		padding: 5rpx 10rpx;

		&--3 {
			background-color: #999999;
		}

		&--1,
		&--2 {
			background-color: #f33636;
		}

		&-0,
		&-1,
		&-10,
		&-5 {
			background-color: #92C75B;
		}
	}

	.group-registration {
		background: #92C75B;
		color: #FFFFFF;
	}
</style>